<script>
import {getLoginStorage, getPersonInfoStorage} from "../saves/sessionStorage.js";
import {axiosGetPersonInfo} from "../api";

export default {
  name: "bottom",
  data() {
    return {
      username:"",
      isLogin: getLoginStorage(),
    }
  },
  beforeMount() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      if (this.isLogin) {
        let result = await axiosGetPersonInfo({account: this.account,password: this.password});
        if (result.status === 200) {
          this.username = result.data.userName;
        }
      }
    },
    switchPublicPosts() {
      this.$router.push({name: "publicPosts"});
    },
    switchPrivatePosts() {
      if (this.isLogin) {
        this.$router.push({name: "privatePosts"});
      } else {
        this.$router.push({name: "account"})
      }
    },
    switchPersonInfo() {
      if (this.isLogin) {
        this.$router.push({name: "personInfo"});
      } else {
        this.$router.push({name: "account"})
      }
    },
    switchPersonPrivacy() {
      if (this.isLogin) {
        this.$router.push({name: "personPrivacy"});
      } else {
        this.$router.push({name: "account"})
      }
    },
    switchPersonConfig() {
      if (this.isLogin) {
        this.$router.push({name: "personConfig"});
      } else {
        this.$router.push({name: "account"})
      }
    }
  }
}
</script>

<template>
  <div id="bottom">
    <div class="bottom-box">
      <div class="bottom-info">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <p>个人信息</p>
            <ul>
              <li>
                <img alt="" src="../img/headImg.jpg" width="100">
              </li>
              <li>
                <span>昵称：{{username}}</span>
              </li>
              <li>
                <span>账号：{{this.account}}</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <p>帖子大全</p>
            <ul>
              <li>
                <span @click="switchPublicPosts">公共帖子</span>
              </li>
              <li>
                <span @click="switchPrivatePosts">我的帖子</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <p>个人系统</p>
            <ul>
              <li>
                <span @click="switchPersonInfo">个人信息</span>
              </li>
              <li>
                <span @click="switchPersonPrivacy">隐私设置</span>
              </li>
              <li>
                <span @click="switchPersonConfig">用户设置</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <p>联系我们</p>
            <ul>
              <li>
                QQ：3062953281
              </li>
              <li>
                邮箱：3062953281@qq.com
              </li>
              <li>
                群聊：615420407
                <img alt="" src="../img/QRcode.jpg" width="25%">
              </li>
            </ul>
          </div>
        </el-col>
      </div>
      <div class="bottom-copyright">
        <p>© 2023-2024 祈千论坛版权所有</p>
      </div>
    </div>
  </div>
</template>

<style scoped src="../style/bottom.css">

</style>